<template>
  <view class="usdtwithdraw">
    <!-- 标题 -->
    <view class="withtitle">
      <view class="">USDT充值</view>
      <image class="title_btm" src="/static/images/personCenter/Accent.png" mode=""></image>
    </view>
    <!-- 表单 -->
    <view style="margin-top: 60rpx;">
      <view class="fs-36" style="color: #fff;margin-bottom: 20rpx;">网络</view>
      <view class="ipt_box">

        <u--input v-model="value" style="height: 100%;font-size: 32rpx;" placeholder="输入网络" border="none"></u--input>
      </view>
      <view class="fs-36" style="color: #fff;margin-bottom: 20rpx;">输入充值金额</view>
      <view class="ipt_box ipt_custom">
        <u--input v-model="money" style="height: 100%;font-size: 32rpx;" placeholder="输入充值金额" border="none">
        </u--input>
        <view class="ipt_right" @click="recharge">确定</view>
      </view>
      <!-- <view class="fs-36" style="color: #fff;margin-bottom: 20rpx;">我的地址</view>
			<view class="ipt_box ipt_custom">
				<u--input v-model="value" style="height: 100%;font-size: 32rpx;" placeholder="我的地址"
					border="none"></u--input>
					<view class="ipt_right" @click="copy">复制</view>
			</view> -->
    </view>
    <!-- 图片 -->
    <view class="ercode" v-if="url">
      <image class="er_img" :src="url" mode=""></image>
    </view>
    <!-- 注意事项 -->
    <view class="warning_box">
      <view class="warn_box">
        <image style="width: 40rpx;height: 40rpx;margin-right: 14rpx;" src="/static/images/personCenter/warning.png"
          mode=""></image>
        <view class="fs-32">注意事项</view>
      </view>
      <view class="warn_content fs-26 " style="line-height: 44rpx;">
        <view>1.请确认你的充值网络为 TRC-20，如选择不同网络充值将导致资产遗失。</view>
        <view>2.请务必提供您的 Peakpal 正确钱包地址，以确保充值成功。</view>
        <view>3.该资产不支持智能合约充值，请勿使用智能合约充值，否则资产将无法找回。</view>
        <view>4.充值时间9:00点到24:00。</view>



      </view>
    </view>
    <!-- 弹窗 -->
    <u-popup :show="successShow" :overlay='false' :round="10" mode="center">
      <view class="zhezhao">
        <image class="suc_icon" src="/static/images/personCenter/success.png" mode=""></image>
        <view class="fs-32" style="color: #fff;margin-top: 30rpx;">充值成功</view>
      </view>
    </u-popup>
    <u-popup :show="errorShow" :overlay='false' :round="10" mode="center">
      <view class="zhezhao">
        <view class="error_img">
          <image class="error_icon" src="/static/images/personCenter/error.png" mode=""></image>
        </view>
        <view class="fs-32" style="color: #fff;margin-top: 30rpx;">交易失败</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        url: false,
        money: '',
        value: '',
        successShow: false,
        errorShow: false

      };
    },
    methods: {
      async recharge() {
        if (!this.money) {
          uni.$u.toast('请输入数量')
          return
        }
        let res = await this.$http.post('user/recharge', {
          money: this.money
        })
        if (res.code == 200) {

          // 在新窗口中打开指定的 URL 地址

          // #ifdef H5
          //该代码仅在h5中生效
          window.open(res.data.pay_url);

          // #endif
          // #ifdef APP-PLUS
          // this.url=res.data.img
          plus.runtime.openURL(res.data.pay_url)
          //该代码仅在app中生效
          // #endif
        } else {
          uni.$u.toast(res.msg || '提交失败，稍后重试')
        }

      },


      copy() {
        uni.setClipboardData({
          data: this.value,
          success: res => {
            uni.showToast({
              icon: 'success',
              title: '复制成功'
            })
          }
        })
      },
    }
  }
</script>

<style lang="less">
  page {
    background-color: #1E2240;
  }

  .usdtwithdraw {
    padding: 30rpx;

    .warning_box {
      color: #fff;
      margin-top: 30rpx;

      .warn_box {
        display: flex;
        align-items: center;
      }
    }

    .ercode {
      width: 420rpx;
      min-width: 330rpx;
      margin: 0 auto;
      border: 6rpx solid #F7931A;
      border-radius: 20rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40rpx;
      box-sizing: border-box;

      .er_img {
        width: 300rpx;
        height: 300rpx;
      }
    }

    .zhezhao {
      background: rgba(0, 0, 0, 0.3);
      width: 300rpx;
      height: 240rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .error_img {
        width: 80rpx;
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        border-radius: 50%;

        .error_icon {
          width: 40rpx;
          height: 40rpx;
        }
      }

      .suc_icon {
        width: 100rpx;
        height: 70rpx;
      }
    }


    .ipt_custom {
      position: relative;

      .ipt_right {
        background-color: #1E2240;
        color: #fff;
        width: 96rpx;
        min-width: 96rpx;
        height: 56rpx;
        line-height: 50rpx;
        border-radius: 6rpx;
        text-align: center;
        position: absolute;
        right: 20rpx;
        top: 20rpx;

      }
    }

    .ipt_box {
      background-color: #fff;
      border-radius: 20rpx;
      height: 90rpx;
      margin-bottom: 30rpx;
      padding-left: 30rpx;
    }

    .withtitle {
      color: #fff;
      font-size: 44rpx;

      .title_btm {
        width: 200rpx;
        height: 8rpx;
      }
    }
  }
</style>